/*
 * @Author: quit
 * @Date: 2023-02-23 12:15:33
 * @LastEditTime: 2023-02-23 13:56:04
 * @Descripttion:
 * JSX 是 javaScrtpt XML 表示再javaScrtpt中编写XML(html)代码
 * 用于解决使用原生方法的繁琐与阅读性低的问题
 * JSX 与 HTML 结构大相径庭
 *
 * JSX 并不是一个标准化的 ECMAScript 语法,只作为一个语法的拓展
 * 这种语法需要使用一定的工具包 babel 等进行编译处理才可以使用
 * 再脚手架创建的项目中已经存在相关包,不需要进行二次处理  包名 @babel/preset-react
 *
 * @notice:
 * 在React中元素的属性名使用驼峰命名法
 * 列举 :
 * class => className
 * for => htmlFor
 * tabindex => tabIndex
 *
 * 在使用时建议使用小括号对JSX进行包裹
 *
 * 在进行 表达式 插入时使用 {} 而不是Vue中的{{}}
 *
 * 在{}中可以使用一些基础合法的表达式
 *
 * JSX自身也是一个表达式
 *
 * 在差值表达式中无法使用 对象 语句
 * <div>{ {a:'1'} }</div> ×
 * <div> if (true) {} </div> ×
 */

const str = 'JSX'
const sayHi = () => {
    return 'Hi~'
}
const dv = <div>JSX</div>

const div = (
    <div>
        Hello React-cli !!!
        <div className="jsx">{str}</div>
        <div>{'a'}</div>
        <div>{1 + 1}</div>
        <div>{3 > 5 ? 'yes' : 'no'}</div>
        <div>{sayHi()}</div>
        {dv}
    </div>
)

/**
 * 条件渲染
 * 可以使用 if else 或者使用三元表达式的方式
 */
const isLoading = true
const loadData = () => {
    if (isLoading) {
        return <div> loading... </div>
    }
    return <div> 数据加载完成 </div>
}
const loadData_2 = () => {
    return isLoading ? <div> loading... </div> : <div> 数据加载完成 </div>
}
// 逻辑与运算符
const loadData_3 = () => {
    return isLoading && <div> loading... </div>
}

/**
 * 样式添加
 */
// 1.行内样式
const styleNode = <div style={{ color: 'red', backgroundColor: 'skyblue' }}>JSX样式处理</div>
// 2.calss
const styleNode_2 = <div className="styleNode">JSX样式处理</div>
